<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暖言树洞 - 温暖你的每一天</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 top-0">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-tree text-green-500 text-2xl"></i>
                <span class="text-xl font-bold text-green-600">暖言树洞</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="home.html" class="text-gray-700 hover:text-green-500 transition-colors">首页</a>
                <a href="diary.html" class="text-gray-700 hover:text-green-500 transition-colors">心情日记</a>
                <a href="drift.html" class="text-gray-700 hover:text-green-500 transition-colors">漂流瓶</a>
                <a href="mall.html" class="text-gray-700 hover:text-green-500 transition-colors">公益商城</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="profile.html" class="text-gray-700 hover:text-green-500 transition-colors">
                    <i class="fas fa-user-circle text-xl"></i>
                </a>
                <button class="md:hidden text-gray-700">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 英雄区域 -->
        <section class="flex flex-col items-center justify-center text-center py-12 md:py-20">
            <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mb-6">
                <i class="fas fa-heart text-green-500 text-4xl"></i>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">欢迎来到暖言树洞</h1>
            <p class="text-lg md:text-xl text-gray-600 max-w-2xl mb-8">在这里，你可以安全地分享心情，获得AI暖言猫猫的暖心回复，也可以与他人进行友善的交流。</p>
            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="diary.html" class="bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-8 rounded-full transition-colors shadow-md hover:shadow-lg">
                    <i class="fas fa-pen-to-square mr-2"></i>写日记
                </a>
                <a href="drift.html" class="bg-white hover:bg-gray-100 text-green-500 font-medium py-3 px-8 rounded-full transition-colors shadow-md hover:shadow-lg border border-green-200">
                    <i class="fas fa-message mr-2"></i>查看漂流瓶
                </a>
            </div>
        </section>

        <!-- 功能介绍 -->
        <section class="py-16">
            <h2 class="text-3xl font-bold text-center mb-12">暖心功能</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-book-open text-green-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">心情日记</h3>
                    <p class="text-gray-600">记录你的每日心情，释放内心的情感压力。</p>
                </div>

                <!-- 功能卡片2 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-robot text-blue-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">AI暖言回复</h3>
                    <p class="text-gray-600">AI暖言猫猫会为你的日记留下温暖的回复。</p>
                </div>

                <!-- 功能卡片3 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-paper-plane text-purple-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">日记漂流</h3>
                    <p class="text-gray-600">经过隐私计算后，你的日记可以漂流给其他用户。</p>
                </div>

                <!-- 功能卡片4 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-hands-helping text-yellow-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">公益兑换</h3>
                    <p class="text-gray-600">用获得的暖心货币兑换公益计划的相关热力值。</p>
                </div>
            </div>
        </section>

        <!-- 每日精选 -->
        <section class="py-16 bg-gradient-to-br from-green-50 to-blue-50 rounded-2xl p-8">
            <h2 class="text-3xl font-bold text-center mb-12">每日精选</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 精选日记1 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="flex items-center mb-4">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                        <div>
                            <h4 class="font-medium">匿名用户</h4>
                            <p class="text-sm text-gray-500">2小时前</p>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">今天虽然遇到了一些困难，但看到路边盛开的小花，突然觉得生活还是很美好的。</p>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center space-x-4">
                            <button class="text-gray-500 hover:text-red-500 transition-colors">
                                <i class="fas fa-heart mr-1"></i> 24
                            </button>
                            <button class="text-gray-500 hover:text-blue-500 transition-colors">
                                <i class="fas fa-comment mr-1"></i> 8
                            </button>
                        </div>
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">精选</span>
                    </div>
                </div>

                <!-- 精选日记2 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="flex items-center mb-4">
                        <img src="https://picsum.photos/id/65/40/40" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                        <div>
                            <h4 class="font-medium">匿名用户</h4>
                            <p class="text-sm text-gray-500">昨天</p>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">终于完成了一个困扰我很久的项目，感觉特别有成就感！感谢一路上帮助过我的人。</p>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center space-x-4">
                            <button class="text-gray-500 hover:text-red-500 transition-colors">
                                <i class="fas fa-heart mr-1"></i> 42
                            </button>
                            <button class="text-gray-500 hover:text-blue-500 transition-colors">
                                <i class="fas fa-comment mr-1"></i> 15
                            </button>
                        </div>
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">精选</span>
                    </div>
                </div>

                <!-- 精选日记3 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                    <div class="flex items-center mb-4">
                        <img src="https://picsum.photos/id/91/40/40" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                        <div>
                            <h4 class="font-medium">匿名用户</h4>
                            <p class="text-sm text-gray-500">3天前</p>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-4">今天和好朋友一起去看了电影，吃了好吃的，简单的快乐就是这么简单。</p>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center space-x-4">
                            <button class="text-gray-500 hover:text-red-500 transition-colors">
                                <i class="fas fa-heart mr-1"></i> 36
                            </button>
                            <button class="text-gray-500 hover:text-blue-500 transition-colors">
                                <i class="fas fa-comment mr-1"></i> 11
                            </button>
                        </div>
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">精选</span>
                    </div>
                </div>
            </div>
            <div class="text-center mt-8">
                <a href="精选.html" class="text-green-500 hover:text-green-600 font-medium">查看更多 <i class="fas fa-arrow-right ml-1"></i></a>
            </div>
        </section>
    </main>

    <!-- 底部导航栏 (移动端) -->
    <nav class="md:hidden fixed bottom-0 w-full bg-white shadow-lg border-t border-gray-200">
        <div class="flex justify-around py-3">
            <a href="home.html" class="flex flex-col items-center text-green-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="diary.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-pen-to-square text-xl"></i>
                <span class="text-xs mt-1">日记</span>
            </a>
            <a href="drift.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-message text-xl"></i>
                <span class="text-xs mt-1">漂流瓶</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <script src="js/main.js"></script>
</body>
</html>